<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <VueEditor
          v-model="form.content"
          :editorToolbar="[
            ['bold', 'italic', 'underline'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['image', 'code-block'],
          ]"
        />
      </el-form-item>
      <el-form-item>
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in categoryList"
            :key="item.id"
            :label="item.id"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
          :file-list="form.cover"
          :action="$axios.defaults.baseURL + '/upload'"
          :headers="{
            Authorization: token,
          }"
          :on-success="coverSuccess"
          :on-remove="coverRemove"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor,
  },
  data() {
    return {
      checkList: [], // 选中的分类
      categoryList: [], //请求回来的分类
      token: localStorage.getItem("token"), //本地的token密令
      form: {
        //发布请求所需参数
        title: "", //标题
        content: "", //内容
        categories: [], //分类id对象
        cover: [], //封面id对象
        type: 1, //文章类型
      },
    };
  },
  created() {
    this.$axios({
      url: "/category",
    }).then((res) => {
      console.log(res.data);
      // 不显示关注与头条分类
      res.data.data.splice(0, 2);
      this.categoryList = res.data.data;
    });
    // url带有id时回显渲染页面
    if (this.$route.query.id) {
      this.$axios({
        url: "/post/" + this.$route.query.id,
      }).then((res) => {
        // 请求回来的数据 与 页面显示所需的数据 两者类型不匹配 需要映射 先改变再赋值
        this.checkList = res.data.data.categories.map((num) => {
          return num.id;
        });
        res.data.data.content = res.data.data.content.replace(/div/g, "p");
        res.data.data.cover.map((img) => {
          if (img.url.indexOf("http") === -1) {
            img.url = this.$axios.defaults.baseURL + img.url;
          }
          //组件需要一个唯一性的uid 而请求回的id具有唯一性 赋值组件的uid即可
          img.uid = img.id;
          return img;
        });
        console.log(res.data.data);
        this.form = res.data.data;
      });
    }
  },
  watch: {
    checkList() {
      // 请求参数orm.categories需要一个对象 映射this.checkList
      this.form.categories = this.checkList.map((num) => {
        return {
          id: num,
        };
      });
    },
  },

  methods: {
    coverSuccess(res, file, fileList) {
      console.log(res, file);
      const id = res.data.id; // 上传成功 根据请求需要 向form插入需要的id对象
      file.id = id; // 而回显页面时 组件渲染又另有需要
      this.form.cover.push(file); //请求api只需要file.id,页面回显渲染只需要file.url 互不干扰
    },
    coverRemove(err, file, fileList) {
      console.log("上传失败");
    },
    onSubmit() {
      // 发布文章
      console.log(this.form);
      this.$axios({
        method: "post",
        url: "post",
        data: this.form,
      }).then((res) => {
        console.log(res.data);
        if (res.data.message === "文章发布成功") {
          this.$message({
            message: res.data.message,
            type: "success",
          });
          this.$router.push("/postList");
        }
      });
    },
  },
};
</script>

<style>
</style>